<template>
	<view>
		<!-- 日期选择框 -->
		<u-calendar v-model="dateBoxShow" :mode="mode" @change='chooseDate'></u-calendar>
		<view class="head">
			<view class="newsBox">
				<view class="head_input">
					<view class="input_label">
						日期:
					</view>
					<view class="input_content">
						<input v-model="dateValue" @focus="hideKeyBoard" :type="type"  placeholder="请选择查询日期" class="input" height="80"  @click='dateBoxShow=true'/>
					</view>
				</view>
				<view class="head_input">
					<view class="input_label">
						车次:
					</view>
					<view class="input_content">
						<input v-model="tripValue" :type="type" placeholder="车次或航班 如: T23" class="input" height="80" />
					</view>
				</view>
				<view class="head_input">
					<view class="input_label">
						地区:
					</view>
					<view class="input_content">
						<input v-model="areaValue" :type="type"  placeholder='地名如四川 可不填' class="input" height="80" />
					</view>
				</view>
				<u-button type="primary" style="border-radius: 40rpx;" @click="searchTrip">查询</u-button>
			</view>
		</view>
		<view class="trip_content" v-if="tripList.length!=0">
			<view class="content_head">
				<view class="head_left">
					<view class="left_icon">
					</view>
					<view class="left_content">
						查询结果
					</view>
				</view>
				<view class="head_right">
					{{updateTime}}更新
				</view>
			</view>
			<view class="trip_data">
				<view class="label_name" style="width: 120rpx;">
					日期
				</view>
				<view class="label_name" style="width: 220rpx;">
					车次/航班
				</view>
				<view class="label_name" style="width: 200rpx;">
					始发
				</view>
				<view class="label_name"style="width: 200rpx;">
					终点
				</view>
			</view>
			
			<view class="trip_data"	v-for="item in tripList" :key='item.id'>
				<view class="trip_data_item" style="width: 120rpx;">
					{{item.date | dateFilter}}
				</view>
				<view class="trip_data_item" style="width: 220rpx;">
					{{item.no | noFilter}}
				</view>
				<view class="trip_data_item" style="width: 200rpx;">
					{{item.pos_start}}
				</view>
				<view class="trip_data_item" style="width: 200rpx;">
					{{item.pos_end}}
				</view>
			</view>
			<view class="information">
				<view class="information_title">
					如有同乘人员为确诊患者：
				</view>
				<view class="information_content">
					 * 同乘人员、可能接触人员返家后，暂不要外出，居家封闭隔离观察。如有发热症状请就近到网上公布的指定医院发热门诊救治。
				</view>
				<view class="information_content">
					  * 就诊过程中，要全程佩戴口罩，尽量不要乘坐公共交通工具。
				</view>
				<view class="information_content">
					  * 同乘人员、可能接触人员要第一时间到所在社区进行登记，并与所在县（市）区疾病预防控制部门取得联系。
				</view>
			</view>
		</view>
		<view class="trip_content">
			<view class="content_head">
				<view class="head_left">
					<view class="left_icon">
					</view>
					<view class="left_content">
						全部信息
					</view>
				</view>
				<view class="head_right">
					{{updateTime}}更新
				</view>
			</view>
			<view class="trip_data">
				<view class="label_name" style="width: 120rpx;">
					日期
				</view>
				<view class="label_name" style="width: 220rpx;">
					车次/航班
				</view>
				<view class="label_name" style="width: 200rpx;">
					始发
				</view>
				<view class="label_name"style="width: 200rpx;">
					终点
				</view>
			</view>
			
			<view class="trip_data"	v-for="item in tripListData" :key='item.id'>
				<view class="trip_data_item" style="width: 120rpx;">
					{{item.date | dateFilter}}
				</view>
				<view class="trip_data_item" style="width: 220rpx;">
					{{item.no | noFilter}}
				</view>
				<view class="trip_data_item" style="width: 200rpx;">
					{{item.pos_start}}
				</view>
				<view class="trip_data_item" style="width: 200rpx;">
					{{item.pos_end}}
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		filters:{
			dateFilter(e){
				e = e + '' 
				e = e.slice(5,10)
				return e
			},
			noFilter(e){
				if(e.length>6){
					return e.substr(0,6) + "..."
				}
				else {
					return e
				}
				
			}
		},
		data() {
			return {
				tripListData:[],
				tripList:[],
				dateValue: '',
				tripValue:'',
				areaValue:'',
				type: 'text',
				border: false,
				dateBoxShow:false,
				mode: 'date',
				updateTime:''
			};
		},
		onLoad() {
			this.getTripData()
		},
		methods:{
			searchTrip(){
				if(!this.dateValue && !this.tripValue && !this.areaValue){
					uni.showToast({
						title:"请输入航班信息信息",
						icon:'none'
					})
				}else{
					this.tripList = []
					for(var i=0;i<this.tripListData.length;i++){
						var tripValueFlag = true
						var areaEndFlag = true
						var areaStartFlag = true
						if(this.tripListData[i].no.search(this.tripValue)==-1 || this.tripValue == ""){
							tripValueFlag = false
						}
						if(this.tripListData[i].pos_end.search(this.areaValue)==-1 || this.areaValue == ""){
							areaEndFlag = false
						}
						if(this.tripListData[i].pos_start.search(this.areaValue)==-1 || this.areaValue== ""){
							areaStartFlag = false
						}
						if(this.dateValue==this.tripListData[i].date || tripValueFlag || areaEndFlag || areaStartFlag){
							this.tripList.push(this.tripListData[i])
						}
					}
					if(this.tripList.length == 0){
						uni.showToast({
							title:"没有查到相关行程",
							icon:'none'
						})
					}
				}
			},
			chooseDate(e){
				this.dateValue = e.result
			},
			getTripData(){
				uni.request({
					url:'https://r.inews.qq.com/api/travelFront'
				}).then(res=>{
					this.tripListData = res[1].data.data.list
					this.updateTime = res[1].data.data.update_time
				})
			},
			hideKeyBoard(){
				uni.hideKeyboard()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.information{
		height: 410rpx;
		padding: 0 40rpx;
	
		float: left;

		background-color: #F6F6F6;
		line-height: 46rpx;
		.information_title{
			color: #222;
			font-size: 28rpx;
		}
		.information_content{
			color: #999999;
			font-size: 26rpx;
		}
	}
.trip_content{
	margin-top: 410rpx;
	font-size: 24rpx;
	color: #666;
	.content_head{
		height: 48rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 40rpx;
		align-items: center;
		.head_left{
			display: flex;
			justify-content: start;
			align-items: center;
			.left_icon{
				height: 32rpx;
				width: 8rpx;
				background-color: #085aff;
				border-radius: 13rpx;
				margin-right: 10rpx;
			}
			.left_content{
				color: #222;
				font-size: 32rpx;
				font-weight: 600;
			}
		}
		.head_right{
			color: #999999;
		}
	}
	.trip_data{
		padding: 0rpx 40rpx 20rpx 40rpx;
		display: flex;
		justify-content: start;
		align-items: center;
		margin-top: 30rpx;
		border-bottom: 2rpx solid #ebeef5;
		.label_name{
			color: #222;
			font-weight: 600;
			padding: 0 20rpx;
			text-align: center;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.trip_data_item{
			padding: 0 20rpx;
			text-align: center;
			overflow: hidden;
			max-height: 32rpx;
		}
	}
}
.head{
	height: 460rpx;
	padding:40rpx 40rpx 0 40rpx;
	background-image: url(https://vfiles.gtimg.cn/vupload/20210119/d3c5501611055430689.png);
	background-size: 100% 100%;
	.newsBox{
		height: 560rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 26rpx 26rpx 30rpx;
		box-shadow: 0 0  30rpx #77AEFF;
		margin-top: 200rpx;
		.head_input{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 80rpx;
			margin: 40rpx 0;
			.input_label{
				color: #222;
				font-size: 36rpx;
				margin: 0 20rpx 0 0;
			}
			.input_content{
				width: 516rpx;
				.input{
					background-color: #F5F5F5; 
					padding-left: 30rpx;
					border-radius: 20rpx;
					height: 80rpx;
					width: 460rpx;
					border: none;
					box-shadow: none;
					outline:solid #fff;
				}
			}
		}
	}
}
</style>
